{% extends "base.html" %}
{% block head %}
	{{ super() }}
	<style type="text/css">
		body {
		margin-top: 40px;
		}
  </style>
{% endblock %}
{% block content %}
<script type="text/javascript">
function set_openid(openidTxt, pr)
{
    u = openidTxt.search('<username>');
    if (u != -1) {
        // openidTxt requires username
        user = prompt('Enter your ' + pr + ' username:');
        openidTxt = openidTxt.substr(0, u) + user;
    }
    form = document.forms['login'];
    form.elements['openidTxt'].value = openidTxt;
}
</script>
<h1>Sign In</h1>
<form action="" method="post" name="login">
    <p>
        Please enter your OpenID, or select one of the providers below:<br>
        {{form.openidTxt(size=80)}}
        {% for error in form.errors.openidTxt %}
        <span style="color: red;">[{{error}}]</span>
        {% endfor %}<br>
        |{% for pr in providers %}
        <a href="javascript:set_openid('{{pr.url}}', '{{pr.name}}');">{{pr.name}}</a> |
        {% endfor %}
    </p>
    <p>{{form.remember_me}} Remember Me</p>
    <p><input type="submit" value="Sign In"></p>
</form>

{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

{% endblock %}
